<template>
  <div class="About">
    <Title heading="M About"/>
    <nav>
      <b
        v-for="item of types"
        :class="{ active: activeType === item.code }"
        @click="toggleType(item.code)"
      >
        {{ item.text }}
      </b>
    </nav>
    <h2>{{ activeType }}</h2>
    <ul v-if="newsList.length > 0">
      <li
        v-for="(item, index) of newsList"
        :key="item.docid"
      >
        <img height="100" :src="item.imgsrc" alt="">
        <h3>{{ item.title }}</h3>
      </li>
    </ul>
<!--    <Title heading="M About 1"/>-->
<!--    {{ newsList }}-->
<!--    <hr>-->
<!--    <button @click="getNewsList">set newsList</button>-->
    <hr>
    <button @click="counterAdd">counter++, {{ counter }}</button>
    <em>computed: {{ counterFixed5 }}</em>
    <div
      style="font-size: 100px"
      @click="loadMore"
    >
      {{ loadMoreText }}
    </div>
  </div>
</template>
<!--
vue2：选项式api
vue3完全兼容选项式api
vue3       [组合式api]
-->
<script>
import { ref, onBeforeMount, onMounted, watch, computed } from "vue"
import Title from "@/components/Title";
import jsonp from "jsonp";

export default {
  name: "About",
  components: {
    Title
  },
  setup() {
    const types= [
      { text: "电视", code: "BA10TA81wangning" },
      { text: "电影", code: "BD2A9LEIwangning" },
      { text: "明星", code: "BD2AB5L9wangning" },
      { text: "音乐", code: "BD2AC4LMwangning" },
      { text: "体育", code: "BA8E6OEOwangning" },
      { text: "财经", code: "BA8EE5GMwangning" },
      { text: "军事", code: "BAI67OGGwangning" },
      { text: "军情", code: "DE0CGUSJwangning" },
    ]
    const size = ref(2)
    const page = ref(1)
    const loadMore = () => {
      page.value++
      // 0-10.html    (1 - 1) * 10
      // 10-10.html   (2 - 1) * 10
      // 20-10.html   (page - 1) * size
      console.log(page.value)
      // console.log(`${(page.value - 1) * size.value}-${size.value}.html`)
      getNewsList({
        type: activeType.value,
        currentPage: page.value,
        pageSize: size.value
      })
    }

    // let activeType = "BAI67OGGwangning"
    const activeType = ref("BAI67OGGwangning")
    const toggleType = (code) => {
      activeType.value = code
    }
    watch(activeType, (curr) => {
      // 类型变化刷新数据
      page.value = 1
      newsList.value = []
      getNewsList({
        type: curr,
        pageSize: size.value
      })
    })

    const newsList = ref([])
    const loadMoreText = computed(() => {
      return newsList.value.length === 0 ? "暂无数据" : "加载更多"
    })
    const getNewsList = ({ type, currentPage = 1, pageSize = 10}) => {
      console.log(`https://3g.163.com/touch/reconstruct/article/list/${type}/${(currentPage - 1) * pageSize}-${pageSize}.html`)
      jsonp(
        `https://3g.163.com/touch/reconstruct/article/list/${type}/${(currentPage - 1) * pageSize}-${pageSize}.html`,
        {
          name: "artiList"
        },
        (err, res) => {
          newsList.value = [...newsList.value, ...res[type]]
        })
    }
    onMounted(() => {
      console.log("onMounted")
    })
    onBeforeMount(() => {
      console.log("onBeforeMount")

    })
    console.log("setup")
    // 首次加载
    getNewsList({
      type: activeType.value,
      pageSize: size.value
    })

    const counter = ref(0)
    const counterFixed5 = computed(() => counter.value.toFixed(5))
    const counterAdd = () => {
      counter.value++
      console.log(counter.value)
    }
    watch(counter, (newValue, oldValue) => {
      console.log(newValue, "-----", oldValue)
    })

    return {
      loadMore,
      activeType,
      types,
      toggleType,
      counter,
      counterFixed5,
      counterAdd,
      newsList,
      loadMoreText,
      getNewsList
    }
  },
}
</script>
<style scoped lang="stylus">
nav b {
  margin-right 10px
  font-size 24px

  &.active {
    color red
  }
}

li {
  border-bottom 1px solid #333
}

.About {
  padding-bottom 100px;
}
</style>
